<template>
<div class="contain">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">订单详情</h2>
  </header>
  <div class="page">
    <div class="detail-tip ft14 cf">
      <p class="f-l">订单号：{{bbilllist.BBillNo}}</p>
      <!-- <p class="f-r">{{bbilllist.BillDate}}</p> -->
    </div>
    <div class="form-line2 displayflex">
      <div class="left green">发</div>
      <dl class="ctx flex1">
        <dt>{{mainlist.DepartureProvince | province}}{{mainlist.DepartureCity | city}}{{mainlist.DepartureDistrict | district}}{{mainlist.DepartureAddress}}</dt>
        <dd>{{mainlist.PickContacts}}  {{mainlist.PickContactsTel}} </dd>
      </dl>
    </div>
    <div class="form-line2 displayflex">
      <div class="left yellow">收</div>
      <dl class="ctx flex1">
        <dt>{{mainlist.ArrivalProvince | province}}{{mainlist.ArrivalCity | city}}{{mainlist.ArrivalDistrict | district}}{{mainlist.ArrivalAddress}}</dt>
        <dd>{{mainlist.SendContacts}}  {{mainlist.SendContactsTel}} </dd>
      </dl>
    </div>
    <div class="detail-goods mb20">
      <div class="ft17 tit">商品信息</div>
      <div class="ctx" v-if="goodslist.length > 0">
        <div class="ft17 displayflex detail" v-for="item in goodslist">
          <div class="flex1 goods-unit">
            <p>{{item.GoodsName}}</p>
            <span class="ft14">{{item.GoodsSpec}} {{item.Unit}}</span>
          </div>
          <div class="price"><span class="org">{{item.Pcks}}</span>{{item.Unit}}</div>
        </div>
      </div>
    </div>
    <div class="detail-goods mb20">
      <div class="ft17 tit">电子凭证</div>
      <ul class="pic-ctx cf" v-if="HandOver != null">
        <li v-for="item in handoverPict">
          <div class="pic">
            <img :src="item | simpleImgUrl">
          </div>
        </li>
      </ul>
    </div>
  </div>
  <div class="total-footer displayflex">
    <div class="flex1 num">共<span class="org">{{mainlist.OrdersPKGS}}</span>件</div>
    <div class="displayflex">
      <div class="btn btn-sm flex1" v-if="mainlist.State=='11'">修改订单</div>
      <div class="btn btn-sm flex1" v-if="mainlist.State=='12'" @click="driver(bbilllist.Guid)">选择配送员</div>
      <div class="btn btn-sm flex1" v-if="mainlist.State>51">配送详情</div>
      <div class="btn btn-sm flex1"
           v-if="$route.query.step=='1'"
           @click="pickUp">拍照取货</div>
      <div class="btn btn-sm flex1" v-if="$route.query.step=='2'"
           @click="pickUp">交货</div>
    </div>
  </div>
</div>
</template>

<script>
export default{
   data() {
    return {
      bbilllist: [],
      mainlist:[],
      goodslist: [],
      HandOver: [],
      bbillno: "",
      showLoad: true,
      handoverPict: [],
    };
  },
  created() {
    this.getData();
  },
  methods:{
    goBack(){
      this.$router.go(-1);
    },
    driver(guid){
      this.$router.push({
        path:'/driverList',
        query:{id:guid}
      })
    },
    getData(){
      var guid = this.$route.query.id;
      var self = this;
      var query = {
        Guid: guid
      };
      this.Ajax.post("GetOrderDetail", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          self.bbilllist = resp.Data.Bill;
          self.mainlist =resp.Data.Main;
          self.goodslist = resp.Data.BbDetial;
          self.HandOver =resp.Data.HandOver;
          self.handoverPict = JSON.parse(self.HandOver.HandoverPict);
        }
      });
    },
    pickUp(){//提货，交货跳转
      this.$router.push({
        path:'/pickUp',
        query:{
          step:this.$route.query.step
        }
      })
    }
  }
}
</script>